<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar-wrap">
        <image :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
      </view>
      <view class="info-wrap">
        <text class="nickname">{{userInfo.nickname || '未登录'}}</text>
        <text class="user-id" v-if="userInfo.userId">ID: {{userInfo.userId}}</text>
      </view>
    </view>
    
    <!-- 订单区域 -->
    <view class="order-section">
      <view class="section-header">
        <text class="title">我的订单</text>
        <view class="more" @tap="goOrderList">
          <text>查看全部</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      <view class="order-types">
        <view class="type-item" v-for="(item, index) in orderTypes" :key="index" @tap="goOrderList(item.type)">
          <image :src="item.icon" mode="aspectFit"></image>
          <text>{{item.name}}</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-group">
        <view class="menu-item" v-for="(item, index) in menuList" :key="index" @tap="handleMenu(item)">
          <view class="left">
            <image :src="item.icon" mode="aspectFit"></image>
            <text>{{item.name}}</text>
          </view>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { userApi } from '@/api/index'
import { showToast } from '@/utils/common'

export default {
  data() {
    return {
      userInfo: {
        avatar: '',
        nickname: '',
        userId: ''
      },
      orderTypes: [
        { name: '待付款', icon: '/static/order/unpaid.png', type: 1 },
        { name: '待发货', icon: '/static/order/unshipped.png', type: 2 },
        { name: '待收货', icon: '/static/order/unreceived.png', type: 3 },
        { name: '待评价', icon: '/static/order/unevaluated.png', type: 4 },
        { name: '退款/售后', icon: '/static/order/refund.png', type: 5 }
      ],
      menuList: [
        { name: '收货地址', icon: '/static/menu/address.png', path: '/pages/address/list' },
        { name: '优惠券', icon: '/static/menu/coupon.png', path: '/pages/coupon/list' },
        { name: '我的收藏', icon: '/static/menu/favorite.png', path: '/pages/favorite/list' },
        { name: '浏览历史', icon: '/static/menu/history.png', path: '/pages/history/list' },
        { name: '联系客服', icon: '/static/menu/service.png', type: 'contact' },
        { name: '设置', icon: '/static/menu/settings.png', path: '/pages/settings/index' }
      ]
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      try {
        const res = await userApi.getUserInfo()
        this.userInfo = res
      } catch (error) {
        console.error('获取用户信息失败', error)
      }
    },
    
    // 跳转订单列表
    goOrderList(type) {
      uni.navigateTo({
        url: `/pages/order/list?type=${type}`
      })
    },
    
    // 处理菜单点击
    handleMenu(item) {
      if (item.type === 'contact') {
        // 打开客服会话
        uni.openCustomerServiceChat({
          extInfo: { url: 'https://work.weixin.qq.com/xxx' },
          corpId: 'xxx',
          success(res) {}
        })
      } else {
        uni.navigateTo({
          url: item.path
        })
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background: #ff0000;
  
  .avatar-wrap {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    overflow: hidden;
    margin-right: 30rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .info-wrap {
    .nickname {
      font-size: 36rpx;
      color: #fff;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .user-id {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}

.order-section {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .more {
      font-size: 28rpx;
      color: #999;
      
      .icon-arrow-right {
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }
  }
  
  .order-types {
    display: flex;
    justify-content: space-between;
    
    .type-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }
      
      text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}

.menu-section {
  margin-top: 20rpx;
  
  .menu-group {
    background: #fff;
    
    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .left {
        display: flex;
        align-items: center;
        
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
        
        text {
          font-size: 28rpx;
          color: #333;
        }
      }
      
      .icon-arrow-right {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}
</style> 